<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar :title="title" :border-bottom="false"></fa-navbar>
		<view class="u-p-30 bg-white">
			<u-form :model="form" ref="uForm" label-width="180">				
				
				 <!-- <u-form-item label="日期" prop="odtime" required  >
				    <picker mode="date" :value="form.odtime"  @change="selodtime">
				      <view class="uni-input">{{form.odtime}}</view>
				     </picker>	
				 </u-form-item> -->
			
			<u-form-item label="单号" prop="ordersn" required>
				<u-input v-model="form.ordersn" />
			</u-form-item>	
				 <u-form-item label="姓名" prop="name" required>
				 	<u-input v-model="form.name" />
				 </u-form-item>				
				 
				 <u-form-item label="联系电话" prop="mobile" required>
				 	<u-input v-model="form.mobile"  />
				 </u-form-item>
				 <!-- 
				 <u-form-item label="所在地区" prop="area_name">
				 	<u-input type="select" :select-open="cityShow" v-model="form.area_name" placeholder="请选择地区" @click="cityShow = true"></u-input>
				 </u-form-item> -->
				 
				 <u-form-item label="地址" prop="address" >
				 	<u-input v-model="form.address" />
				 </u-form-item>
				 <u-form-item label="预约时间" prop="time" >
				 	<u-input v-model="form.time" />
				 </u-form-item>
				 
				 <u-form-item label="产品类型" prop="type" required>
				 	<u-input v-model="form.type" />
				 </u-form-item>
				 <u-form-item label="项目" prop="project" required>
				 	<u-input v-model="form.project" />
				 </u-form-item>
				 <u-form-item label="安装数量" prop="num" required>
				 	<u-input v-model="form.num" />
				 </u-form-item>
				 
				 
			 
				<!-- 
				<u-form-item label="电池日期" prop="batteryCapacitytime"   >
					 
				    <picker mode="date" :value="form.batteryCapacitytime"  @change="selbatteryCapacitytime">
				 	    <view class="uni-input">{{form.batteryCapacitytime}}</view>
				 	 </picker>									
				</u-form-item>	 -->	
			
			
				 
					<view class="u-p-30 u-m-t-30 bg-white" >
						<view class="text-weight u-p-b-30">工作照片</view>
						<u-upload
							width="150"
							height="150"
							ref="uUpload"
								:file-list="images_work_showlist"
							@on-uploaded="onUploaded_images_work"
							@on-remove="onRemove_images_work"
							:action="uploadurl"
							:header="header"
							:form-data="formdata"
							max-count="5"
						 ></u-upload>
					</view>	
					
				
			<!-- 	 <view class="u-p-30 u-m-t-30 bg-white" >
				 	<view class="text-weight u-p-b-30">营业执照</view>
				 	<u-upload
				 		width="150"
				 		height="150"
				 		ref="uUpload"
				 		@on-uploaded="onUploaded_images_yyzz"
				 		@on-remove="onRemove_images_yyzz"
				 		:action="uploadurl"
				 		:header="header"
				 		:form-data="formdata"
				 		max-count="2"
				 	 ></u-upload>
				  </view>	 -->
				 	
				<!-- 	
				 <u-form-item label="备注" prop="mark"> 
				 	<u-input type="textarea" v-model="form.mark" placeholder="备注"  />
				 </u-form-item> -->	
				 
			  
<!-- 				<u-form-item label="选择" prop="address">
					<u-input type="textarea" v-model="form.address" />
					<u-button slot="right" type="primary" :custom-style="{ backgroundColor: '#007eff', color: theme.color }" size="mini" @click="chooseAddress">
						选择地址
					</u-button>
				</u-form-item> -->
				<!-- <u-form-item label="设为默认地址" :border-bottom="false">
					<u-switch slot="right" :active-color="theme.bgColor" v-model="isdefault" @change="change"></u-switch>
				</u-form-item> -->
				<u-form-item label="是否完成" prop="statustext" required>
					<u-input disabled @click="showselstatus=true;" v-model="form.statustext" />			 
				</u-form-item>	
				
			</u-form>
		</view>
			<!-- <u-calendar v-model="odtimeshow" :mode="range" max-date="2099-12-30" @change="odtimechange"></u-calendar> -->
	<!-- 城市 -->
	<view class="" v-if="is_render"><fa-citys v-model="cityShow" :areaCode="areaCode" @city-change="cityResult"></fa-citys></view>
	<!-- <view class="" v-if="is_render"><fa-goodssel v-model="cityShow" :areaCode="areaCode" @city-change="cityResult"></fa-goodssel></view> -->
	
	<u-select v-model="showsel" mode="single-column" :list="columns" @confirm="confirm"></u-select>
	<u-select v-model="showselsex" mode="single-column" :list="columnssex" @confirm="confirmsex"></u-select>
	<u-select v-model="showselstatus" mode="single-column" :list="columnsstatus" @confirm="confirmstatus"></u-select>
	
		
		<view class="u-flex u-col-center u-row-center u-border-top" style="z-index:999">
			<u-button type="primary" :custom-style="{ width: '80vw', backgroundColor: '#007eff', color: theme.color }" shape="circle" hover-class="none" @click="sumbit">
				提交审核
			</u-button>
		</view>
	</view>
</template>

<script>
import {avatar} from '@/common/fa.mixin.js';
export default {
	 mixins: [avatar],
	
	
	data() {
		return {
			title: '详情',
	
			form:{
				  time:'',
				  
				  name: '',
				  mobile: '',
				  address: '',
				  type: "",
				  typename:"",
				  project:'',
				  projectname:"",
				  num:'',
				  area_name: '',
				  area_id: '',
				   images: ''
			},
			imageslen:0,
			imageslen_dg:0,
			images_sfz_showlist:[],
			images_dg_showlist:[],
			images_work_showlist:[],
			imageslen_yyzz:0,
			imageslen_sfz:0,
			imageslen_work:0,
			rules: {				 
				mobile: [
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				 
				name:[{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						}
				], 
				address:[{
							required: true,
							message: '请输入地址',
							trigger: 'blur'
						}
				] 
				 
			},
			isdefault: false,
			cityShow: false,
			is_render: false,
			areaCode: [],
			odtimeshow: 0,
			mode: 'date',// date
			dateString1: this.getDate(new Date()),
			dateString: this.getDateTime(new Date()),
			datetimeString: this.getDateTime(new Date(), false),
			datetimeDefaultValueString: '',
			datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
			dateTimestamp: Date.now(),
			dateInstance: new Date(),
			dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
			datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 * 3600000)],
			start: Date.now() - 10 * 24 * 3600000,
			end: Date.now() + 10 * 24 * 3600000,
			showsel: false,		 
			columns: [
				  {value:'48V',label:'48V'},{value:'60V',label:'60V'},{value:'72V',label:'72V'}	                    
			],
			showselsex: false,
			columnssex: [
				  {value:'男',label:'男'},{value:'女',label:'女'}
				  	                    
			],
			showselstatus: false,
			columnsstatus: [{value:'0',label:'否'},
				  {value:'1',label:'是'},
				  	                    
			],
			ordersn:0,
							
		};
	},
	onLoad(e) {
		this.ordersn = e.ordersn || '';
		console.log(22222,this.ordersn)
		if (e.ordersn) {
			this.title = '详情';
			this.getdetail();
		} else {
			this.title = '添加';
			// this.is_render = true;
			// this.isdefault = this.vuex_address.id ? false : true;
		}
		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
	userInfo() {
			 //  if (this.vuex_user.avatar && this.vuex_user.avatar.indexOf('data:image/svg+xml;base64') == -1) {
				// this.form.avatar = this.vuex_user.avatar;
			 //  }
			 //  this.form.username = this.vuex_user.username || '';
			 //  this.form.mobile = this.vuex_user.mobile || '';
			  // this.form.nickname = this.vuex_user.nickname == '' || this.vuex_user.nickname == '微信用户' ? '' : this.vuex_user.nickname;
			  // this.form.sex = this.vuex_user.sex;
			  // this.form.id = this.vuex_user.id || '';
			  
			  // this.form.sex = this.vuex_user.sex;			  
			  // this.form.province = this.vuex_user.province;		  
			  // this.form.city =this.vuex_user.city;			  
			  // this.form.area_name =  this.vuex_user.area;
			  // this.form.address =  this.vuex_user.address;
			  // this.form.bankno =  this.vuex_user.bankno;
			  
			  
			 
			
			  this.form.images_sfz = this.vuex_user.images_sfz;
			  
			  if(this.form.images_sfz){
			  		 this.images_sfz_showlist = this.vuex_user.images_sfzshow.map(item => ({
			  					url: item.response.data.fullurl,      // 必须字段：图片地址
			  					status: 'success',  // 必须字段：标记为上传成功
			  					name: '图片',       // 可选字段：文件名
			  					response:item.response       // 可选字段：文件名
			  					}));
			  						  	   
			  }
			  
			  
			  	
			
							  
							  
			  			
				// console.log(this.images_sfz_showlist)
						
						
			   // this.form.area_name = this.vuex_user.province + '/' + this.vuex_user.city+ '/' + this.vuex_user.area;
			   
			  // this.form.agentid = this.vuex_user.agentid + "/" + this.vuex_user.username;
			  return this.vuex_user;
			},
		header() {
			return {
				token: this.vuex_token || '',
				uid: this.vuex_user.id || 0
			};
		},
		formdata() {
			let multipart = (this.vuex_config.config && this.vuex_config.config.upload.multipart) || '';
			let isObj = this.$u.test.object(multipart);
			if (isObj) {
				return this.vuex_config.config.upload.multipart;
			}
			return {};
		},
		uploadurl() {
			if (!this.vuex_config.upload) {
				return '';
			}
			return this.vuex_config.upload.uploadurl;
		}
	},
	
	
	methods: {
		// 时间选择1 
		odtimeshowfun(){
			this.odtimeshow=1;
			 
		},
		odtimechange(e){
			// this.odtimeshow=1;
			this.form.odtime=e.result; 
			console.log(e);
		},
		getgoodsbysel() {
			this.$api.goodsbyselect({ id: this.id }).then(res => {
				if (res.code) {
					this.form = Object.assign(this.form, {
						id: this.id,
						receiver: res.data.receiver,
						mobile: res.data.mobile,
						address: res.data.address
					});
					this.isdefault = res.data.isdefault == 1;
					this.areaCode = [res.data.province_id, res.data.city_id, res.data.area_id];
					this.is_render = true;
				} else {
					this.$u.toast(res.msg);
					uni.$u.route({
						type:'back'
					});
				}
			});
		},
		
		change(value) {
			this.form.isdefault = value ? 1 : 0;
		},
		chooseAddress() {
			console.log(111)
			uni.chooseLocation({
				success: res => {
					Object.assign(this.form, {
						address: res.address
					});
				}
			});
		},
		//城市选择 三级结果
		cityResult(e) {
			this.form.area_name = e.province.label + '/' + e.city.label + '/' + e.area.label;
			
			this.form.province = e.province.label;
			this.form.city = e.city.label;			
			this.form.area = e.area.label;		
			this.form.area_id = e.area.value;
			// this.form.brandname = e.province.label + '/' + e.city.label ;
		 
		},
		confirmsex(e){
			// console.log(e[0].value)
			this.form.sex=e[0].value; 
			// this.form.leveltext=e[0].label;  
		},
		
		confirmstatus(e){
			// console.log(e[0].value)
			this.form.status=e[0].value; 
			this.form.statustext=e[0].label;  
		},
				
		
		
		getdetail() {
			this.$api.getformdetail({ ordersn: this.ordersn,sftype:'serveruid' }).then(res => {
				if (res.code) {
					this.form = Object.assign(this.form, {
						id: this.id,
						name: res.data.name,
						mobile: res.data.mobile,
						address: res.data.address,
						time: res.data.time,
						type: res.data.type,
						project: res.data.project,
						num: res.data.num,
						ordersn:res.data.ordersn
					});
					
					
					this.form.images_work = res.data.images_work;
												  
							  if(this.form.images_work){
												  		 this.images_work_showlist = this.vuex_user.images_workshow.map(item => ({
												  					url: item.response.data.fullurl,      // 必须字段：图片地址
												  					status: 'success',  // 必须字段：标记为上传成功
												  					name: '图片',       // 可选字段：文件名
												  					response:item.response       // 可选字段：文件名
												  					}));
												  						  	   
												  }
												  
												  
					// this.isdefault = res.data.isdefault == 1;
					// this.areaCode = [res.data.province_id, res.data.city_id, res.data.area_id];
					this.is_render = true;
				} else {
					this.$u.toast(res.msg);
					uni.$u.route({
						type:'back'
					});
				}
			});
		},
		
		
		sumbit() {
		 
			// if((pricegoods&&onlychangekcj)){
			// 	this.$u.toast("只换空车架与新车价格不可同时填写");
			// 	return false;
			// }
			
			
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.form.sftype="serveruid";
					this.$api.changeformst(this.form).then(res => {
						this.$u.toast(res.msg);
						if (res.code) {
							setTimeout(() => {
								uni.$u.route({
									type:'back'
								})
							}, 1500);
						}else{
							this.$u.toast(res.msg);
						}
					});
				} else {
					console.log('验证失败');
				}
			});
		},
		

		 
		// 这个编辑有区别多图
		onUploaded_images_sfz(e, name) {
			console.log(e, name);
			console.log("len",e.length);
			
			// console.log(2,e);
			if(e.length>2){
				this.$u.toast("最多可以上传2张");
				  // 当文件数量达到限制时，阻止继续添加文件
				      e.stopPropagation();
				return false;
			}
			let images1=""
			let aa=0;
			images1 = e
				.map((item, index, array)  => {				
					console.log(index);
					if(item.response==undefined){
						// console.log(111111111);
						// 有点问题 先这样
						 return this.images_sfz_showlist[index]['response']['data']['url'];
					}else{
						return item.response.data.url;	
					}	
					
				})
				.join(',');
			this.form.images_sfz=images1;
			// let j = JSON.parse(r2.data);
			 this.imageslen_sfz = e.length;
		},
		onRemove_images_sfz(index, lists, name) {
			this.form.images_sfz = lists
				.map((item, index, array)  => {				
					console.log(index);
					if(item.response==undefined){
						// console.log(111111111);
						 return this.images_sfz_showlist[index]['response']['data']['url'];
					}else{
						return item.response.data.url;	
					}	
					
				})
				.join(',');
		},
		
		
		//
			onUploaded_images_work(e, name) {
					console.log(e, name);
					console.log("len",e.length);
					
					// console.log(2,e);
					if(e.length>5){
						this.$u.toast("最多可以上传2张");
						  // 当文件数量达到限制时，阻止继续添加文件
						      e.stopPropagation();
						return false;
					}
					let images1=""
					let aa=0;
					images1 = e
						.map((item, index, array)  => {				
							console.log(index);
							if(item.response==undefined){
								// console.log(111111111);
								// 有点问题 先这样
								 return this.images_work_showlist[index]['response']['data']['url'];
							}else{
								return item.response.data.url;	
							}	
							
						})
						.join(',');
					this.form.images_work=images1;
					// let j = JSON.parse(r2.data);
					 this.imageslen_work = e.length;
				},
				onRemove_images_work(index, lists, name) {
					this.form.images_work = lists
						.map((item, index, array)  => {				
							console.log(index);
							if(item.response==undefined){
								// console.log(111111111);
								 return this.images_work_showlist[index]['response']['data']['url'];
							}else{
								return item.response.data.url;	
							}	
							
						})
						.join(',');
				},
		
	
		
		confirm(e){
			console.log(e[0].value)
			this.form.batteryCapacity=e[0].value; 
			 
		},
			change(e) {
						console.log('----change事件:', e);
		 },
		 
		 
		 selodtime(e) {
		 	   this.form.odtime = e.detail.value
		 			 
		 },
		 selbatteryCapacitytime(e) {
		 	   this.form.batteryCapacitytime = e.detail.value
		 				console.log('----maskClick事件');
		 },
		  
		maskClick(e) {
			 
						
						 this.form.batteryCapacitytime = e.detail.value
						console.log('----maskClick事件');
					},
	    getDateTime(date, addZero = true){
		        return `${this.getDate(date, addZero)} ${this.getTime(date, addZero)}`
	    },
			     getDate(date, addZero = true){
			          date = new Date(date)
			          const year = date.getFullYear()
			          const month = date.getMonth()+1
			          const day = date.getDate()
			          return `${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day}`
			        },
			        getTime(date, addZero = true){
			          date = new Date(date)
			          const hour = date.getHours()
			          const minute = date.getMinutes()
			          const second = date.getSeconds()
			          return this.hideSecond ?
			          `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}` :
			          `${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second}`
			        },
			  			addZero(num) {
			  				if (num < 10) {
			  					num = `0${num}`
			  				}
			  				return num
			  			}
			  
			  
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>
